<template>
	<div class="bottomsList">
		<!-- <div :style="{backgroundImage:'url('+item.image+')',backgroundSize:'cover'}">
			{{item}}
		</div> -->
		<!--  -->
		<!-- <ul>
			<li v-for="item in bottomslists" :key="item.index" ><img :src="item.dataDetail.image" /></li>
		</ul> -->
		<ul>
			<template v-for="(item,index) in bottomslists">
				<li class="botleft headerleft" :key="index" v-if="item.type==4">
					<img :src="item.dataDetail.image" />
				</li>
				<li class="botrights headerright" :key="index" v-if="item.type==7">
					<img :src="item.dataDetail.image" />
					<div style="line-height: 0.8rem;">
						<p>
							{{item.dataDetail.title}}
							<img src="../../../../public/bottomslistimg/bottomslist-00.png" />
						</p>
						<div>{{item.dataDetail.numLabel}}</div>
					</div>
				</li>
				<li class="botleft mtop" :key="index" v-if="item.type==1" :class="{'des':show!=index%2}">
					<div>
						<img :src="item.dataDetail.image" />
						<span>{{item.dataDetail.placeLabel}}</span>
					</div>
					<div>
						{{item.dataDetail.title}}
					</div>
					<div>
						{{item.dataDetail.days}}
					</div>
					<div>
						<div class="bottom_left">
							￥
							<b>{{item.dataDetail.priceLabel}}</b>
							起
						</div>
						<div class="bottom_right">
							{{item.dataDetail.numLabel}}
						</div>
					</div>
				</li>
				<!--  -->
				<!-- <li class="botright mtop">
					<div>
						<img src="../../../../public/bottomslistimg/bottomslist-03.jpg" />
						<span>成都出发</span>
					</div>
					<div>
						[跨年登高 • 四姑娘山嘉年华]登顶5025/5276雪山之巅；双桥沟攀冰初体验；与三获金犀牛攀登大神零距离对话；藏式跨年晚会；赠送登顶证书，5日雪山圆梦之旅！
					</div>
					<div>跟团游·户外游·5天4晚</div>
					<div>
						<div class="bottom_left">
							￥
							<b>2680</b>
							起
						</div>
						<div class="bottom_right">
							61人已报名
						</div>
					</div>
				</li> -->
			</template>
		</ul>
	</div>
</template>

<script>
export default{
	name:"BottomsList",
	data(){
		return{
			bottomslists:[],
			show:0,
		}
	},
	created() {
		let that = this;
		this.axios.get('https://m.youxiake.com/api/m/index/flow/recommend?sitecode=1&city_id=1&type=1&page=1').then( (res)=>{
			
			this.bottomslists = res.data.data.list;
			console.log(this.bottomslists);
			// [0].dataDetail.image
		}).catch( (error)=>{
			console.log(error);
		})
	}
}
</script>

<style scoped>
.bottomsList{
	width: 96%;
	margin: 0 auto;
}
/* 所有li */
.bottomsList ul li{
	border-radius: 0.3rem;
	background: white;
}
/* 左右两边的li */
.botleft,
.botright
{
	width: 48.5%;
}
.botleft{
	float: left;
}
.botright{
	float: right;
}
/* 左右两边的li里面的img */
.botleft img,
.botright img
{
	width: 100%;
	border-top-left-radius: 0.3rem;
	border-top-right-radius: 0.3rem;
}
/* 右边第一个 */
.headerright{
	height: 6.3rem;
}
/* 右边第一个的img */
.botright img{
	height: 4.6rem;
	width: 100%;
	border-top-left-radius: 0.3rem;
	border-top-right-radius: 0.3rem;
}
/* 左边第一个 */
.headerleft img{
	border-radius: 0.3rem;
}
/*  */
.bottomsList ul li div{
	line-height: 0.8rem;
}
.bottomsList ul li div p{
	text-indent: 0.6em;
	font-weight: bold;
	font-size: 0.35rem;
	position: relative;
}
.bottomsList ul li div p img{
	width: 33%;
	height: 70%;
	float: right;
	position: absolute;
	right: 0.2rem;
	top: -0.25rem;
}
.bottomsList ul li div div{
	line-height: 0.5rem;
	text-indent: 0.7em;
}
/* 第三个 */
.botleft div:nth-child(1),
.botright div:nth-child(1)
{
	position: relative;
}
.botleft div:nth-child(1) img,
.botright div:nth-child(1) img
{
	height: 3.2rem;
	width: 100%;
	border-top-left-radius: 0.3rem;
	border-top-right-radius: 0.3rem;
}
.botleft div:nth-child(1) span,
.botright div:nth-child(1) span
{
	position: absolute;
	top: 0rem;
	left: 0rem;
	border: 1px solid black;
	width: 1.5rem;
	line-height: 0.45rem;
	text-align: center;
	border-top-left-radius: 0.3rem;
	border-bottom-right-radius: 0.3rem;
	color: white;
	background-color: rgba(0,0,0,0.5);
}
.botleft div:nth-child(2),
.botright div:nth-child(2)
{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 0.355rem;
	font-weight: 600;
	line-height: 0.5rem;
	width: 90%;
	margin: 0 auto;
}
.botleft div:nth-child(3),
.botright div:nth-child(3)
{
	text-indent: 1em;
	color: #999;
	font-size: 0.3rem;
}
.botleft div:nth-child(4),
.botright div:nth-child(4)
{
	height: 0.9rem;
}
.bottom_right{
	float: right;
	text-indent: 0em !important;
	width: 1.6rem !important;
	font-size: 0.1rem !important;
	color: #999;
}
.bottom_left{
	float: left;
	color: #ff7100;
	font-size: 0.3rem;
}
.bottom_left b{
	font-size: 0.4rem;
	font-weight: bold;
}
.mtop{
	margin-top: 0.3rem;
}
.botrights{
	float: right;
	width: 49%;
	height: 6.3rem;
}
.botrights img{
	width: 100%;
	height: 4.6rem;
}
/* 左右浮动 */
.des{
	float: right;
}
</style>
